<template>
  <el-menu
      @select="click"
      :collapse="expand"
      :unique-opened="true"
      default-active="home"
      class="sea-menu"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b">

    <fragment v-if="menus" v-for="menu in menus" :key="menu.key">
      <!--1级导航-->
      <el-menu-item v-if="menu.children === undefined" :index="menu.key">
        <i :class="menu.icon"></i>
        <span slot="title">{{ menu.title }}</span>
      </el-menu-item>

      <el-submenu v-if="menu.children" :index="menu.key" :route="menu.src">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item-group v-if="menu.children">
          <template slot="title"><span v-show="expand">{{ menu.title }}</span></template>

          <fragment v-for="child in menu.children" :key="child.key">
            <!--2级导航-->
            <el-menu-item v-if="child.children === undefined" :index="child.key" :route="child.src">
              {{ child.title }}
            </el-menu-item>

            <!--3级导航-->
            <el-submenu v-if="child.children" :index="child.key">
              <template slot="title">{{ child.title }}</template>
              <el-menu-item v-for="sub in child.children" :key="sub.key" :index="sub.key">{{ sub.title }}</el-menu-item>
            </el-submenu>
          </fragment>
        </el-menu-item-group>
      </el-submenu>
    </fragment>
  </el-menu>
</template>

<script>
export default {
    name: "navigation"
    , props: {
        // 菜单栏数据列表
        menus: {type: Array, default: undefined},
        // 是否展开了菜单栏
        expand: {type: Boolean, default: false},
        // 菜单栏点击事件
        click: {type: Function}
    }
}
</script>

<style scoped>
</style>
